<template>
  <div class="echart-theme-manage">
    <Button type="primary" class="m-r-5px" @click="openEchartThemeForm('add')">新建主题</Button>
    <Tooltip placement="top" content="刷新数据">
      <Button class="m-r-5px" type="primary" @click="loadEchartThemes">
        <Icon type="md-refresh"/>
      </Button>
    </Tooltip>
    <div class="m-b-10px"></div>
    <Table ref="table" :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadEchartThemes">
    </Page>

    <EchartThemeForm ref="echartThemeForm" @refreshDataList="loadEchartThemes"></EchartThemeForm>
  </div>
</template>

<script>
import EchartThemeForm from './EchartThemeForm'

import ManageMixin from '@/mixin/ManageMixin'

export default {
  name: 'EchartThemeManage',
  mixins: [ManageMixin],
  components: {
    EchartThemeForm
  },
  data() {
    return {
      node_env: process.env.NODE_ENV,
      loading: false,
      columns: [
        {
          title: '主题名称',
          key: 'name'
        },
        {
          title: '主色调',
          align: 'center',
          width: 300,
          render: (h, params) => {
            let colors = JSON.parse(params.row.json_text).color;

            return h('div', {
              style: {}
            }, colors.map(function (color) {
              return h('div', {
                'class': {
                  'color-lump': true
                },
                style: {
                  ':after': {
                    content: 'X'
                  },
                  width: '30px',
                  height: '30px',
                  backgroundColor: color,
                  float: 'left'
                }
              }, [
                h('span', {
                  style: {
                    // display: 'block',
                    lineHeight: '30px'
                  }
                }, color ? '' : 'X')
              ])
            }))

          }
        },
        {
          title: '类型',
          key: 'is_sys',
          align: 'center',
          render: (h, params) => {
            if (params.row.is_sys == '1') {
              return h('span', {
                style: {
                  // color: '#19be6b'
                }
              }, '系统主题')
            } else if (params.row.is_sys == '0') {
              return h('span', {
                style: {
                  // color: '#ed4014'
                }
              }, '用户主题')
            }
          }
        },
        {
          title: '创建者',
          key: 'user_username'
        },
        {
          title: '创建时间',
          key: 'create_date'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary',
                  icon: 'md-create'
                },
                'class': {
                  'm-r-5px': true
                },
                on: {
                  click: () => {
                    this.openEchartThemeForm('edit', params.row.id)
                  }
                }
              }),
              h('Poptip', {
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'top-end',
                  title: '您确定要删除此项吗？'
                },
                style: {},
                on: {
                  'on-ok': () => {
                    this.deleteEchartTheme(params.row.id)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error',
                    icon: 'md-trash'
                  }
                },)
              ])
            ]);
          }
        }
      ]
    }
  },
  mounted() {
    this.loadEchartThemes();
  },
  methods: {

    loadEchartThemes() {
      this.loading = true
      this.$PnApi.EchartThemeApi.getEchartThemeByPage(this.pageIndex, this.pageSize).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false;
      })
    },

    openEchartThemeForm(type, id) {
      this.$refs.echartThemeForm.init(type, id)
    },

    deleteEchartTheme(id) {
      this.$PnApi.EchartThemeApi.deleteEchartTheme(id).then(result => {
        if (result.data.success) {
          this.loadEchartThemes();
          this.$Message.success('删除成功')
        }
      });
    }

  },
  computed: {}
}
</script>

<style scoped>

</style>
